<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/default">
<head>
<title>轮播图配置</title>
    <meta charset="UTF-8">
    <!-- zTree -->
    <link th:href="@{/css/plugins/ztree/metroStyle/metroStyle.css}" rel="stylesheet" />
    <style>
        .rightMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            background-color: #eeeeee;
            text-align: left;
            padding: 2px;
        }
        .rightMenu ul li {
            margin: 1px 0;
            padding:5px 12px;
            cursor: pointer;
            list-style: none outside none;
            background-color: #FFF;
            color :#009688
        }

        .rightMenu ul li:hover {
            background-color: #009688;
            color :#FFF
        }
        .rightMenu ul li .iconfont{
            font-size: 12px
        }
        .item-image{
            text-align: center;
            height: 300px;
            line-height: 300px;
            border: 1px solid #e5e6e7;
        }
        .item-image .operator-group{
            position: absolute;
            bottom: 10px;
            line-height: normal;
            right: 10px;
        }
        .item-image a{
            color: #0066cc;
        }
        .item-image a:hover{
           cursor: pointer;
        }
        .item-image img{
            width: 350px;
            height: auto;
        }
    </style>
</head>
<section layout:fragment="content">
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-sm2">
                <div id="treeDiv" style="overflow-x: hidden">
                    <div id="treeConfigType" class="ztree"></div>
                </div>
            </div>
            <div class="layui-col-sm10" id="imageList">
            </div>
        </div>
        <div id="rMenu" class="rightMenu">
            <ul>
                <li id="m_add" style=""><i class="icon iconfont icon-add">新增配置</i></li>
                <li id="m_edit"><i class="icon iconfont icon-edit">编辑配置</i></li>
                <li id="m_active" style=""><i class="icon iconfont icon-unlock" th:text="生效"></i></li>
                <li id="m_inActive" style=""><i class="icon iconfont icon-lock" th:text="失效"></i></li>
            </ul>
        </div>
    </div>
    <script id="imageListTpl" type="text/html">
        <div class="layui-row layui-col-space30">
            {{#  layui.each(d, function(index, item){ }}
            <div class="layui-col-sm4 item-image">
                <img src="{{item.pictureUrl}}"/>
                <div class="operator-group">
                    {{#  if(item.status=='DRAFT'){ }}
                    <a onclick="publishCarouselImage( '{{item.publicInfoId}}')">上架</a>
                    {{#  } }}
                    {{#  if(item.status=='FILE'){ }}
                    <a onclick="pullOffCarouselImage('{{item.publicInfoId}}')">下架</a>
                    {{#  } }}
                    {{#  if(item.status=='DRAFT'){ }}
                    <a onclick="deleteCarouselImage('{{item.publicInfoId}}')">删除</a>
                    {{#  } }}
                </div>
            </div>
            {{#  }); }}
            <div class="layui-col-sm4 item-image">
                <button type="button" class="layui-btn" id="uploadImage">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
    </script>
    <script th:src="@{/layui/layui.js}"></script>
    <!-- zTree -->
    <script th:src="@{/js/plugins/ztree/jquery.ztree.core.min.js}"></script>
    <script th:src="@{/js/plugins/ztree/jquery.ztree.excheck.min.js}"></script>
    <script th:src="@{/js/plugins/ztree/jquery.ztree.exedit.min.js}"></script>

    <script th:src="@{/js/basedata/configCarousel.js}"></script>
</section>
</html>